<template>
  <a-layout>
    <a-layout-content style="padding: 24px">
      <!-- 服务类型选择 -->
      <div class="content-card">
        <h2>生态服务管理</h2>
        <a-form layout="vertical">
          <a-form-item label="服务类型选择">
            <a-select v-model="selectedService" @change="handleServiceChange">
              <a-select-option value="物质供给">物质供给</a-select-option>
              <a-select-option value="文化服务">文化服务</a-select-option>
              <a-select-option value="调节服务">调节服务</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>

      <!-- 数据录入页面 -->
      <div v-if="selectedService === '物质供给'" class="content-card">
        <h3>物质供给</h3>
        <a-form layout="vertical">
          <a-form-item label="产品类型">
            <a-input v-model="provisionData.productType" />
          </a-form-item>
          <a-form-item label="实物量 (单位: 吨)">
            <a-input v-model="provisionData.quantity" />
          </a-form-item>
          <a-form-item label="市场价格 (单位: 元/吨)">
            <a-input v-model="provisionData.marketPrice" />
          </a-form-item>
          <a-button type="primary" @click="submitData">提交</a-button>
        </a-form>
      </div>

      <div v-if="selectedService === '文化服务'" class="content-card">
        <h3>文化服务</h3>
        <a-form layout="vertical">
          <a-form-item label="工业旅游景点名称">
            <a-input v-model="culturalData.touristAttraction" />
          </a-form-item>
          <a-form-item label="游客年旅游总人次">
            <a-input v-model="culturalData.visitorCount" />
          </a-form-item>
          <a-form-item label="直接费用 (单位: 元)">
            <a-input v-model="culturalData.directCost" />
          </a-form-item>
          <a-form-item label="间接费用 (单位: 元)">
            <a-input v-model="culturalData.indirectCost" />
          </a-form-item>
          <a-button type="primary" @click="submitData">提交</a-button>
        </a-form>
      </div>

      <div v-if="selectedService === '调节服务'" class="content-card">
        <h3>调节服务</h3>
        <a-form layout="vertical">
          <a-form-item label="服务类型">
            <a-select
              v-model="regulatingData.serviceType"
              @change="handleRegulationTypeChange"
            >
              <a-select-option value="水调节">水调节</a-select-option>
              <a-select-option value="空气调节">空气调节</a-select-option>
              <a-select-option value="气候调节">气候调节</a-select-option>
            </a-select>
          </a-form-item>

          <!-- 动态展示具体调节服务类型的输入框 -->
          <div v-if="regulatingData.serviceType === '水调节'">
            <a-form-item label="水源涵养量 (单位: 立方米)">
              <a-input v-model="regulatingData.waterQuantity" />
            </a-form-item>
            <a-form-item label="替代设施成本 (单位: 元)">
              <a-input v-model="regulatingData.facilityCost" />
            </a-form-item>
          </div>

          <div v-if="regulatingData.serviceType === '空气调节'">
            <a-form-item label="空气质量改善量 (单位: 吨/年)">
              <a-input v-model="regulatingData.airImprovement" />
            </a-form-item>
            <a-form-item label="替代设施成本 (单位: 元)">
              <a-input v-model="regulatingData.facilityCost" />
            </a-form-item>
          </div>

          <div v-if="regulatingData.serviceType === '气候调节'">
            <a-form-item label="碳吸收量 (单位: 吨)">
              <a-input v-model="regulatingData.carbonAbsorption" />
            </a-form-item>
            <a-form-item label="碳价格 (单位: 元/吨)">
              <a-input v-model="regulatingData.carbonPrice" />
            </a-form-item>
          </div>

          <a-button type="primary" @click="submitData">提交</a-button>
        </a-form>
      </div>

      <!-- 数据展示 -->
      <div class="content-card" v-if="dataRecords.length > 0">
        <h3>数据展示</h3>
        <a-table :columns="recordColumns" :dataSource="dataRecords" rowKey="id" bordered>
          <template #action="{ record }">
            <a-button type="link" @click="editRecord(record)">编辑</a-button>
            <a-button type="link" danger @click="deleteRecord(record)">删除</a-button>
          </template>
        </a-table>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref } from "vue";

// 当前选择的服务类型
const selectedService = ref("");

// 物质供给数据
const provisionData = ref({
  productType: "",
  quantity: "",
  marketPrice: "",
});

// 文化服务数据
const culturalData = ref({
  touristAttraction: "",
  visitorCount: "",
  directCost: "",
  indirectCost: "",
});

// 调节服务数据
const regulatingData = ref({
  serviceType: "",
  waterQuantity: "",
  facilityCost: "",
  airImprovement: "",
  carbonAbsorption: "",
  carbonPrice: "",
});

// 数据记录
const dataRecords = ref([]);

// 表格列定义
const recordColumns = [
  { title: "服务类型", dataIndex: "serviceType", key: "serviceType" },
  { title: "详情", dataIndex: "details", key: "details" },
  { title: "操作", key: "action", scopedSlots: { customRender: "action" } },
];

// 处理服务类型选择变化
const handleServiceChange = () => {
  // 根据服务类型清空当前输入框的数据
  provisionData.value = {
    productType: "",
    quantity: "",
    marketPrice: "",
  };
  culturalData.value = {
    touristAttraction: "",
    visitorCount: "",
    directCost: "",
    indirectCost: "",
  };
  regulatingData.value = {
    serviceType: "",
    waterQuantity: "",
    facilityCost: "",
    airImprovement: "",
    carbonAbsorption: "",
    carbonPrice: "",
  };
};

// 处理调节服务类型选择变化
const handleRegulationTypeChange = () => {
  // 清空调节服务相关输入框
  regulatingData.value.waterQuantity = "";
  regulatingData.value.facilityCost = "";
  regulatingData.value.airImprovement = "";
  regulatingData.value.carbonAbsorption = "";
  regulatingData.value.carbonPrice = "";
};

// 提交数据
const submitData = () => {
  const newData = {
    id: Date.now(),
    serviceType: selectedService.value,
    details: "",
  };

  // 根据服务类型保存不同的数据
  if (selectedService.value === "物质供给") {
    newData.details = `产品类型: ${provisionData.value.productType}, 实物量: ${provisionData.value.quantity}, 市场价格: ${provisionData.value.marketPrice}`;
  } else if (selectedService.value === "文化服务") {
    newData.details = `景点名称: ${culturalData.value.touristAttraction}, 游客总人次: ${culturalData.value.visitorCount}, 直接费用: ${culturalData.value.directCost}, 间接费用: ${culturalData.value.indirectCost}`;
  } else if (selectedService.value === "调节服务") {
    if (regulatingData.value.serviceType === "水调节") {
      newData.details = `水源涵养量: ${regulatingData.value.waterQuantity}, 替代设施成本: ${regulatingData.value.facilityCost}`;
    } else if (regulatingData.value.serviceType === "空气调节") {
      newData.details = `空气质量改善量: ${regulatingData.value.airImprovement}, 替代设施成本: ${regulatingData.value.facilityCost}`;
    } else if (regulatingData.value.serviceType === "气候调节") {
      newData.details = `碳吸收量: ${regulatingData.value.carbonAbsorption}, 碳价格: ${regulatingData.value.carbonPrice}`;
    }
  }

  dataRecords.value.push(newData);
};

// 编辑数据记录
const editRecord = (record) => {
  // 编辑逻辑
};

// 删除数据记录
const deleteRecord = (record) => {
  dataRecords.value = dataRecords.value.filter((r) => r.id !== record.id);
};
</script>

<style scoped>
a-layout {
  height: 100vh;
}

.content-card {
  margin-bottom: 10px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

a-form-item {
  margin-bottom: 16px;
}

a-button {
  margin-top: 16px;
}
</style>
